<template>
	<view class="my-container">
		<view class="user-container">
			<uni-icons class="user-img" style="color:#666" type="contact" size="110"></uni-icons>
			<p class="user-name">{{userInfo.userName}}</p>
		</view>
		<view class="operation-list">
			<!-- 			<view class="operation-item disabled">
				月起始日
			</view>
			<view class="operation-item disabled">
				我的预算
			</view>
			<view class="operation-item" @click="jumpTo('myProperties')">
				我的资产
			</view>
			<view class="operation-item" @click="logOut">
				退出登录
			</view> -->
			<u-cell-group>
				<u-cell icon="calendar" title="月起始日" :value="'每月'+userInfo.monthFirthDate+'日'" @click="show = true">
				</u-cell>
				<u-cell icon="pushpin" title="我的预算" :isLink="true" url="/pages/myBudget/myBudget"></u-cell>
				<u-cell icon="rmb-circle" title="我的资产" :isLink="true" url="/pages/myProperties/myProperties"></u-cell>
				<u-cell icon="question" title="使用教程" disabled></u-cell>
				<u-cell icon="chat" title="反馈" disabled></u-cell>
				<u-cell icon="reload" title="版本更新信息" disabled></u-cell>
				<u-cell icon="arrow-left-double" title="退出登录" @click="logOut"></u-cell>
			</u-cell-group>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="monthFirthDateConfirm"></u-picker>
		<!-- <myTabbar /> -->
	</view>
</template>

<script>
	import {
		callCloudFunction
	} from '@/api/requests.js'
	import myTabbar from '../../components/myTabbar/myTabbar.vue'
	export default {
		data() {
			return {
				show: false,
				userInfo: {},
				columns: [
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
						'19', '20', '21', '22', '23', '24', '25'
					]
				]
			}
		},
		methods: {
			init() {
				const that = this
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						const {
							_id
						} = res.data
						callCloudFunction('checkAccount', {
								_id
							}, res => {
								that.userInfo = res.result.data[0]
								uni.setStorage({
									key: 'userInfo',
									data: res.result.data[0],
								});
							},
							err => {
								uni.showModal({
									content: `获取用户信息失败`,
									showCancel: false
								})
							})
					}
				});
			},
			monthFirthDateConfirm(value) {
				const that = this
				const date = Number(value.value[0])
				const data = {
					...that.userInfo,
					monthFirthDate: date
				}
				callCloudFunction('updateAccount', data, res => {
						that.show = false
						uni.showModal({
							content: `修改成功`,
							showCancel: false
						})
						that.init()
					},
					err => {
						uni.showModal({
							content: `验证失败`,
							showCancel: false
						})
					})
			},
			jumpTo(route) {
				uni.navigateTo({
					url: `/pages/${route}/${route}`
				});
			},
			logOut() {
				uni.removeStorage({
					key: 'userInfo',
					success: function(res) {
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style>
	.my-container {
		position: relative;
		padding-top: 36%;
		height: calc(100vh - 109px);
	}

	.user-container {
		position: absolute;
		height: 22%;
		width: 100%;
		top: 0;
		background-color: #eee;
	}

	.user-img {
		position: absolute;
		top: 50%;
		transform: translateY(-55%);
		left: 5%;
	}

	.user-name {
		position: absolute;
		top: 26%;
		left: 36%;
		font-size: 20px;
	}

	.operation-list {
		position: relative;
		width: 90vw;
		margin: 0 auto;
		z-index: 99;
		border: 1px solid #ddd;
		padding: 20px 25px;
		background-color: white;
		min-height: 65vh;
	}

	.operation-item {
		height: 47px;
		line-height: 47px;
		border-bottom: 1px solid #ddd;
	}

	.disabled {
		color: #999;
	}
</style>
